<template>
  <div>
      <a-comment v-if="showRecomment">
          <a-avatar slot="avatar" :src="$store.getters.user.avatar" alt="Han Solo" />
          <div slot="content">
            <a-form-item>
              <a-textarea ref="textarea" :rows="4" v-model="RecommentValue" />
            </a-form-item>
            <a-form-item>
              <a-button
              style="margin-right: 16px;"
                html-type="submit"
                type="primary"
                @click="handleAddRemark"
              >
                添加评论
              </a-button>
              <a-button
                html-type="submit"
                @click="cancel"
              >
                取消
              </a-button>
            </a-form-item>
          </div>
        </a-comment>
    <a-comment v-for="item in recomment" :key="item.id">
      <span slot="actions" @click="addRemark(item)">回复</span>
      <a slot="author">{{ item.realname }}</a>
      <a-avatar
        slot="avatar"
        :src="item.avatar"
        alt="Han Solo"
      />
      <p slot="content">
        {{ item.content }}
      </p>
    </a-comment>
  </div>
</template>

<script>
export default {
  props: ["commentId","realname"],
  data() {
    return {
      recomment: [],
      RecommentValue:"",
      showRecomment:false
    };
  },
  created() {
      this.searchAllRecomment()
  },
  methods: {
      handleAddRemark() {
      this.$axios
        .post("/recomment/add", {
          username: this.$store.getters.user.username,
          content: this.RecommentValue,
          blogId: this.$route.params.id,
          realname: this.$store.getters.user.realname,
          commentId: this.commentId,
          avatar: this.$store.getters.user.avatar,
        })
        .then((res) => {
          if (res.data.error === -1) {
            this.searchAllRecomment();
            this.$message.success("添加成功")
            this.cancel()
          }
        });
    },
    cancel(){
        this.RecommentValue = ""
            this.showRecomment = false
    },
    addRemark(item){
        console.log(item);
        this.showRecomment = true
        this.RecommentValue = "@"+item.realname+"  "
    },
    searchAllRecomment() {
      this.$axios
        .get("/recomment/search", {
          params: {
            blogId: this.$route.params.id,
            commentId: this.commentId,
          },
        })
        .then((res) => {
          if (res.data.error === -1) {
            this.recomment = res.data.data;
          } else {
            this.recomment = [];
          }
        });
    },
  },
};
</script>

<style></style>
